@mixin clamp($val: 1) {
  @if ($val==1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $val;
    text-overflow: ellipsis;
  }
}

@mixin dropdownMenu($scale: 1, $delay: 0) {
  transform-origin: top right;
  transition: all 0.3s ease;
  transform: scale($scale);
  transition-delay: $delay;
}

//应平安要求去除阴影
@mixin boxShadow() {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0);
}

@mixin formWrap($col: 4) {
  .form-wrap {
    display: grid;
    grid-template-columns: repeat($col, 1fr);
    column-gap: 72px;
    padding-top: 16px;
    .col-two {
      grid-column: 1 / #{$col - 1};
    }
    .col-three {
      grid-column: 1 / #{$col};
      grid-column-start: 2;
      grid-column-end: 4;
    }

    .full {
      grid-column: 1 / #{$col + 1};
    }
    .five {
      grid-column: 1 / #{$col + 2};
    }
  }
}

@mixin dl-list($column: 3, $column-gap: 0, $row-gap: 0, $show-border: 1) {
  .dl-list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat($column, calc(100% / $column));
    grid-column-gap: $column-gap;
    grid-row-gap: $row-gap;
    flex-wrap: wrap;
    @if ($show-border==1) {
      border-top: 1px solid $border-color;
      border-left: 1px solid $border-color;
    }

    dl {
      width: 100%;
      display: flex;
      border-bottom: 1px solid $border-color;
      border-right: 1px solid $border-color;

      dt,
      dd {
        line-height: 24px;
        padding: 6px 0;
      }

      dt {
        min-width: 110px;
        text-align: right;
        border-right: 1px solid $border-color;
        background-color: $bg-color;
        padding-right: 10px;
      }

      dd {
        flex: 1;
        padding: 4px 10px;
      }
    }

    .full {
      grid-column: 1 / #{($column + 1)};
    }

    .two {
      grid-column: 2 / #{($column + 1)};
    }
  }

  .dl-list2 {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid $border-color;
    border-left: 1px solid $border-color;

    dl {
      width: 50%;
      display: flex;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid $border-color;
      border-right: 1px solid $border-color;

      dt {
        min-width: 180px;
        text-align: right;
        border-right: 1px solid $border-color;
        background-color: $bg-color;
        padding-right: 10px;
      }

      dd {
        flex: 1;
        padding-left: 10px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
      }
    }

    .full {
      width: 100%;
    }

    dl.auto-fill {
      height: inherit;

      dt {
      }

      dd {
        align-content: stretch;
      }
    }
  }
}

@mixin edl-list() {
  .edl-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid $border-color;
    border-left: 1px solid $border-color;
    border-right: 1px solid $border-color;
    border-bottom: 1px solid $border-color;

    dl {
      width: 50%;
      display: flex;
      line-height: 40px;

      dt {
        min-width: 110px;
        text-align: right;
        border-right: 1px solid $border-color;
        background-color: $bg-color;
        padding-left: 10px;
      }

      dd {
        text-align: left;
        padding-left: 10px;
      }
    }

    .full {
      width: 100%;
    }
  }
}

@mixin info-list($column: 3) {
  .info-list {
    display: grid;
    grid-template-columns: repeat($column, calc(100% / $column));
    grid-gap: 20px;
    padding: 16px 24px;
    dt {
      color: $font-color;
      margin-bottom: 8px;
    }

    dd {
      color: $tips-color;
    }

    .full {
      grid-column: 1 / #{($column + 1)};
    }
  }
}

@mixin data-title {
  .data-title {
    font-size: 16px;
    font-weight: bold;
    color: $title-color;
    line-height: 40px;
    border-bottom: 1px solid $border-color;
  }
}


@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin pct($pct) {
  width: #{$pct};
  position: relative;
  margin: 0 auto;
}

@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;
  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }
  @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
  @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }
  @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}



@mixin arrow($color:#dddddd, $deg: 45deg) {
  position: absolute;
  content: '';
  top: 50%;
  right: 8px;
  width: 8px;
  height: 8px;
  margin-top:-5px;
  border-width:1px 1px 0 0;
  border-style: solid;
  border-color: $color;
  transform:rotate($deg);
}


/**
* 文字超出部分用省略号代替
* @param {number} $lines 文字行数
*/
@mixin text-overflow($lines: 1) {
  overflow: hidden;
  @if $lines == 1 {
      display:block;
      white-space: nowrap;
      text-overflow: ellipsis;
  } @else {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: $lines;
  }
}




